<template>
  <div class="content">
    <div class="tab">
      <div @click="switchCom(item)" v-for="(item,i) in data" :key="i">{{
      item.name
      }}</div>
      <component :is="current.comName"></component>
    </div>
  </div>
</template>
<script setup lang='ts'>
import A from '../components/dongtaiCom/A.vue'
import B from '../components/dongtaiCom/B.vue'
import C from '../components/dongtaiCom/c.vue'
import { reactive, markRaw } from 'vue'
type Tabs = {
  name: string,
  comName: any
}
type Com = Pick<Tabs, 'comName'>
const switchCom = (item:Tabs)=>{
current.comName = item.comName
}
const data = reactive<Tabs[]>([
  {
    name: '我是A组件',
    comName: markRaw(A)
  },
  {
    name: '我是B组件',
    comName: markRaw(B)
  }, {
    name: '我是C组件',
    comName: markRaw(C)
  }
])
const current = reactive<Com>({
  comName: data[0].comName
})
</script>
<style scoped lang='less'>
.content {
  .tab {
    display: flex;

    div {
      margin: 20px;
      border: 1px solid #ccc;
      padding: 10px;

    }

    div:active {
      background-color: #000;
      color: #fff;
    }

    div:hover {
      box-shadow: 0 0 10px #ccc;
    }
  }
}
</style>